<template>
  <div class="possess">
    <div class="transit_menu">
      <div class="transit_cont">
        <div class="transit_go_back fl" @click="go_back"></div>
        <div class="transit_input fl">
          <form action=".">
            <input
              type="search"
              class="transit_key"
              v-focus
              v-model="keyword"
              placeholder="搜索感兴趣的内容"
              @keypress="jumpSearch"
              ref="input"
            />
          </form>
          <div class="del" @click="del"></div>
        </div>
        <div class="transit_search fr" @click="search">搜索</div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="possess_list">
      <div class="possess_menu">
        <div class="menu_name">
          <span @click="sort(1,2,7)" :class="[nth==7||nth==8 ? 'active': '','name']">综合</span>
          <span class="icons">
            <div @click="sort(1,2,7)" :class="[nth == 7 ? 'active': '','up']"></div>
            <div @click="sort(1,1,8)" :class="[nth == 8 ? 'active': '','down']"></div>
          </span>
        </div>
        <div class="menu_name">
          <span @click="sort(2,2,9)" :class="[nth==9||nth==10 ? 'active': '','name']">价格</span>
          <span class="icons">
            <div @click="sort(2,2,9)" :class="[nth == 9 ? 'active': '','up']"></div>
            <div @click="sort(2,1,10)" :class="[nth == 10 ? 'active': '','down']"></div>
          </span>
        </div>
        <div class="menu_name">
          <span @click="sort(3,2,11)" :class="[nth==11||nth==12 ? 'active': '','name']">销量</span>
          <span class="icons">
            <div @click="sort(3,2,11)" :class="[nth == 11 ? 'active': '','up']"></div>
            <div @click="sort(3,1,12)" :class="[nth == 12 ? 'active': '','down']"></div>
          </span>
        </div>
      </div>
      <div class="home_list">
        <div class="list_cont">
          <div class="list_cont_left">
            <div id="item1"></div>
          </div>
          <div class="list_cont_right">
            <div id="item2"></div>
          </div>
          <div v-if="load" class="loader">正在加载中...</div>
          <div v-if="bottom" class="bottom">已经到底啦</div>
        </div>
      </div>
      <div id="items" style="display:none">
        <div class="list_info" v-for="(item, index) in goods" :key="index">
          <!-- <div class="infor_img" @click="goNews(item.id)">
            <img :src="item.pict_url" />
          </div>-->
          <div @click="goDetail(item.id,item.ftype,item.item_url)">
            <div class="list_img">
              <img class="ocn_img" :src="item.pict_url" />
            </div>
            <div class="list_menu">
              <div class="list_title">{{item.title}}</div>
              <div class="list_store">
                <span v-text="item.user_type==0?'淘宝':'天猫'"></span>
                <div>{{item.shop_title}}</div>
              </div>
              <div class="list_rebate" v-if="+item.ftype===2">
                <span>奖 ¥ {{item.reward_price}}</span>
              </div>
              <div class="no-coupon" v-if="+item.ftype===2">
                <span>¥{{item.coupon_price}}</span>
                <span>销量{{item.volume}}</span>
              </div>
              <div v-else>
                <div class="coupon">
                  <span>{{item.coupon_money}}</span>
                  <span>元券</span>
                </div>
                <div class="list_rebate">
                  <span>奖 ¥ {{item.reward_price}}</span>
                  <span>销量{{item.volume}}</span>
                </div>
                <div class="list_price">
                  <div class="price_now">
                    <small>¥</small>
                    {{item.coupon_price}}
                    <small>券后</small>
                  </div>
                  <div class="price_old">¥ {{item.zk_final_price}}</div>
                </div>
              </div>
            </div>
            <!-- <div class="list_quan">
              <span>{{item.coupon_money}}</span> 元券
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <temp_top></temp_top>
  </div>
</template>
<script>
import $ from "jquery";
import temp_top from "./common.vue";
export default {
  data() {
    return {
      goods: "",
      load: false,
      bottom: false,
      page: 1,
      keyword: "",
      sort_type: 1,
      sort_value: 2,
      nth: 7
    };
  },
  created() {
    //商品列表
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus();
      }
    }
  },
  components: {
    temp_top: temp_top
  },
  methods: {
    //将dom追加到对于瀑布中
    getDom() {
      var elem = $("#items").children();
      for (var i = 0; i < elem.length; i++) {
        if ($("#item1").height() <= $("#item2").height()) {
          $("#item1").append(elem[i]);
        } else {
          $("#item2").append(elem[i]);
        }
      }
    },
    goDetail(id, type, url) {
      // if (type === 1) {
      //   this.$router.push({ path: "/detail", query: { id: id } });
      // }
      //  else {
      //   window.location.href = url;
      // }
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    goNews(e) {
      this.$router.push({ path: "/news", query: { id: e } });
    },
    go_back() {
      history.go(-1);
    },
    del() {
      this.keyword = "";
      this.$refs.input.focus();
    },
    sort(e, f, g) {
      this.sort_type = e;
      this.sort_value = f;
      this.goods = "";
      this.page = 1;
      this.nth = g;
      this.demond();
    },
    demond() {
      var that = this;
      this.goods = "";
      this.page = 1;
      this.bottom = false;
      var params = {
        page: this.page,
        sort_type: this.sort_type,
        sort_value: this.sort_value,
        keyword: this.keyword,
        limit: 20
      };
      this.$axios
        .get(
          //传参发起请求
          "/v1/common/itemSearchV1_4",
          {
            params
          }
        )
        .then(
          res => {
            var result = res.data;
            if (result.code == 200) {
              this.goods = result.data;
              if (result.data.length <= 0) {
                this.bottom = true;
              }
              setTimeout(function() {
                that.getDom();
              }, 0);
              this.scroll(this.goods);
            } else {
              Toast(result.msg);
            }
          },
          res => {
            console.log("error");
          }
        );
    },
    search() {
      this.sort_type = 1;
      this.sort_value = 2;
      this.nth = 7;
      this.demond();
    },
    jumpSearch(e) {
      var keycode = e.keyCode;
      if (keycode == "13") {
        e.preventDefault();
        this.demond();
      }
    },
    scroll(goods) {
      let flag = false;
      window.onscroll = () => {
        let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
        let vh =
          document.compatMode == "CSS1Compat"
            ? document.documentElement.clientHeight
            : document.body.clientHeight; // 浏览器视口的高度
        let height = Math.max(
          document.body.scrollHeight,
          document.documentElement.scrollHeight
        ); // 文档的总高度
        let bottomOfWindow = top + vh >= height;
        if (bottomOfWindow && flag == false) {
          flag = true;
          this.page++;
          var that = this;
          that.load = true;
          var params = {
            page: that.page,
            sort_type: that.type,
            sort_value: that.value,
            keyword: that.keyword,
            limit: 20
          };
          this.$axios
            .get(
              //传参发起请求
              "/v1/common/itemList",
              {
                params
              }
            )
            .then(
              function(response) {
                //接口返回数据
                var data = response.data.data;
                if (data.length <= 0) {
                  that.bottom = true;
                  that.load = false;
                } else {
                  for (var i = 0; i < data.length; i++) {
                    goods.push(data[i]);
                  }
                  setTimeout(function() {
                    that.getDom();
                  }, 0);
                  that.load = false;
                  flag = false;
                }
              },
              response => {
                console.log("error");
              }
            );
        }
      };
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "Detail") {
      to.meta.isUseCache = true;
    } else {
      to.meta.isUseCache = false;
    }
    next();
  },
  activated() {
    this.keyword = this.$route.query.keyword;
    if (!this.$route.meta.isUseCache) {
      this.goods = "";
      this.load = false;
      this.bottom = false;
      this.page = 1;
      this.sort_type = 1;
      this.sort_value = 2;
      this.nth = 7;
      this.demond();
    }
  }
};
</script>
<style lang="less" scoped>
.transit_input {
  width: 76%;
  position: relative;
}
/* .transit_input .del{width:40px;height:40px;background:url("/static/images/del.png") no-repeat center center;background-size:100% 100%;position: absolute;top:16px;right:16px;} */
.transit_menu {
  width: 100%;
  height: 140px;
  line-height: 68px;
  padding-top: 20px;
  background: #ffe514;
}
.transit_menu .transit_cont {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 22px;
}
.transit_key {
  width: 100%;
  height: 68px;
  line-height: 68px;
  border: none;
  border-radius: 34px;
  font-size: 28px;
  text-indent: 26px;
}
.transit_go_back {
  width: 48px;
  height: 48px;
  background: url(/static/images/team_go_back.png) no-repeat left center;
  background-size: 100% 100%;
  margin-right: 2%;
  margin-top: 12px;
}
.transit_search {
  width: 10%;
  line-height: 68px;
  font-size: 28px;
  color: #000;
}
.possess_list {
  width: 100%;
  background: #fff;
  padding-top: 20px;
  border-radius: 60px 60px 0 0;
  margin-top: -48px;
}
.home_list {
  width: 100%;
  padding-bottom: 20px;
}
.home_list .list_cont {
  width: 704px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_info {
  width: 340px;
  // height: 690px;
  background: #fff;
  border: 2px solid #e4e4e4;
  border-radius: 40px 40px 24px 40px;
  // position: relative;
  margin-bottom: 24px;
}
.list_img {
  width: 340px;
  height: 340px;
}
.list_info .ocn_img {
  width: 340px;
  height: 340px;
  border-radius: 40px 40px 0 0;
}
.list_menu {
  width: 330px;
  padding: 0 10px;
  border-radius: 0 0 24px 40px;
  background: #fff;
  box-sizing: border-box;
}
.list_title {
  color: #000000;
  height: 80px;
  font-size: 28px;
  padding-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list_store {
  margin: 12px 0;
  display: flex;
  justify-content: flex-start;
  > span {
    padding: 2px 4px;
    text-align: center;
    // display: block;
    font-size: 18px;
    color: #fff;
    background: #ff2741;
    border-radius: 4px;
    margin-right: 8px;
  }
  > div {
    color: #333334;
    font-size: 24px;
    width: 200px;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分文字以...显示*/
  }
}
.no-coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  span {
    &:nth-child(1) {
      font-size: 36px;
      color: #fe3b30;
      font-weight: bold;
    }
    &:nth-child(2) {
      font-size: 24px;
      color: #9b9b9b;
    }
  }
}
.coupon {
  max-width: 120px;
  height: 35px;
  background: #ffe514;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  span {
    color: #333334;
    &:nth-child(1) {
      font-size: 20px;
      margin-right: 6px;
    }
    &:nth-child(2) {
      font-size: 18px;
    }
  }
}
.list_rebate {
  margin: 12px 0 20px 0;
  display: flex;
  justify-content: space-between;
  > span {
    &:nth-child(1) {
      font-size: 24px;
      color: #fe3b30;
      font-weight: bold;
    }
    &:nth-child(2) {
      font-size: 24px;
      color: #9b9b9b;
    }
  }
}
.list_price {
  display: flex;
  justify-content: flex-start;
  line-height: 1;
  overflow: hidden;
  align-items: center;
  padding-bottom: 30px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.list_price .price_now {
  font-size: 30px;
  color: #fe3b30;
  font-weight: bold;
}
.list_price .price_now small {
  font-size: 24px;
}
.list_price .price_old {
  color: #9b9b9b;
  font-size: 20px;
  text-decoration: line-through;
  margin-left: 16px;
  width: 100px;
  text-align: left;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.list_quan {
  width: 144px;
  height: 60px;
  line-height: 60px;
  background: #ffe514;
  border-radius: 24px 0 22px 0;
  text-align: center;
  color: #333334;
  font-size: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.list_quan span {
  font-size: 32px;
  font-weight: bold;
}
.activity a {
  text-decoration: none;
}
.loader {
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  width: 100%;
}
.bottom {
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  width: 100%;
}
.possess_menu {
  width: 520px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center;
  text-align: justify;
  padding-top: 10px;
  margin-bottom: 30px;
}
.possess_menu .menu_name {
  font-size: 28px;
  color: #9b9b9b;
  position: relative;
}
.possess_menu .menu_name .name.active {
  color: #000;
}
.possess_menu .icons .down {
  width: 0;
  height: 0;
  position: absolute;
  top: 22px;
  left: 64px;
  border-left: 11px solid transparent;
  border-top: 11px solid #e4e4e4;
  border-right: 11px solid transparent;
}
.possess_menu .icons .up {
  width: 0;
  height: 0;
  position: absolute;
  top: 8px;
  left: 64px;
  border-left: 11px solid transparent;
  border-bottom: 11px solid #e4e4e4;
  border-right: 11px solid transparent;
}
.possess_menu .icons .down.active {
  border-top: 11px solid #fe3b30;
}
.possess_menu .icons .up.active {
  border-bottom: 11px solid #fe3b30;
}
</style>
